<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/feildList.css">
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body class="contentPadding">
    <div class="from_control clearfix margin-bottom-30  ">
        <!--<div class="row">
            <div class="select_drop_box col-md-6 col-xs-6">
                <div class="row">
                    <span class="label_on_max col-xs-3 col-md-2">表名：</span>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" placeholder="Table1"/>
                    </div>
                </div>

            </div>
            <div class="select_drop_box col-md-6 col-xs-6">
                <div class="row">
                    <span class="label_on_max col-xs-3 col-md-2 col-xs-offset-1">数据对象名：</span>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" placeholder="人口基本信息"/>
                    </div>
                </div>

            </div>
        </div>-->

        <div class="row">
            <div class="select_drop_box col-xs-2">
                <p class="margin-bottom-5">表名：</p>
                <div class="col-sm-11">
                    <input type="text" class="form-control" placeholder="Table1"/>
                </div>
            </div>
            <div class="select_drop_box col-xs-2">
                <p class="margin-bottom-5">表名：</p>
                <div class="col-sm-11">
                    <input type="text" class="form-control" placeholder="Table1"/>
                </div>
            </div>
            <div class="select_drop_box col-xs-2">
                <p class="margin-bottom-5">表名：</p>
                <div class="col-sm-11">
                    <input type="text" class="form-control" placeholder="Table1"/>
                </div>
            </div>
            <div class="select_drop_box col-xs-2">
                <p class="margin-bottom-5">表名：</p>
                <div class="col-sm-11">
                    <input type="text" class="form-control" placeholder="Table1"/>
                </div>
            </div>
            <div class="select_drop_box col-xs-2">
                <p class="margin-bottom-5">表名：</p>
                <div class="col-sm-11">
                    <input type="text" class="form-control" placeholder="Table1"/>
                </div>
            </div>
        </div>

    </div>
    <div class="portlet-body">
        <div class="fl fieldList" >
            <input type="text" id="plugins4_q" class="form-control"/>
            <div id="tree_3" class="tree-demo jstree jstree-3 jstree-default" role="tree" >

            </div>
        </div>
        <div class="fieldMath" >
            <div class="fieldMathRun" contenteditable="true" id="edit">

            </div>
            <div class="fieldMathCount clearfix" contenteditable="false">
              <div class="fieldMathCount_l fl">
                  <div class="fieldMathCountSymbol">
                      <a class="appendEdit" href="javascript:;">+</a>
                      <a class="appendEdit" href="javascript:;">-</a>
                      <a class="appendEdit" href="javascript:;">*</a>
                      <a class="appendEdit" href="javascript:;">/</a>
                      <a class="appendEdit" href="javascript:;">(</a>
                      <a class="appendEdit" href="javascript:;">)</a>
                  </div>
              </div>
                <div class="fieldMathCount_r fr">
                    <a class="func" href="javascript:;">函数</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jstree/src/jstree.search.js"></script>
<script src="../assets/global/plugins/jstree/dist/ui-tree.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>

/*
    var sendEmoji = document.getElementById('sendEmoji');

    // 定义最后光标对象
    var lastEditRange;

    // 编辑框点击事件
    document.getElementById('edit').onclick = function() {
        // 获取选定对象
        var selection = getSelection();
        // 设置最后光标对象
        lastEditRange = selection.getRangeAt(0)
    };

    // 编辑框按键弹起事件
    document.getElementById('edit').onkeyup = function() {
        // 获取选定对象
        var selection = getSelection();
        // 设置最后光标对象
        lastEditRange = selection.getRangeAt(0)
    };

    $('.fieldMathCount').on('click','.appendEdit',function(){
        var field = $(this).text();
        //    $('<span>'+field+'</span>').appendTo('.fieldMathRun');

        var edit = document.getElementById('edit');
        // 获取输入框对象
        //   var emojiInput = document.getElementById('emojiInput')
        // 编辑框设置焦点
        edit.focus();
        // 获取选定对象
        var selection = getSelection()
        // 判断是否有最后光标对象存在
        if (lastEditRange) {
            // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
            selection.removeAllRanges();
            selection.addRange(lastEditRange)
        }
        // 判断选定对象范围是编辑框还是文本节点
        if (selection.anchorNode.nodeName != '#text') {
            // 如果是编辑框范围。则创建表情文本节点进行插入
            var emojiText = document.createTextNode(field);

            if (edit.childNodes.length > 0) {
                // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
                for (var i = 0; i < edit.childNodes.length; i++) {
                    if (i == selection.anchorOffset) {
                        edit.insertBefore(emojiText, edit.childNodes[i])
                    }
                }
            } else {
                // 否则直接插入一个表情元素
                edit.appendChild(emojiText)
            }
            // 创建新的光标对象
            var range = document.createRange()
            // 光标对象的范围界定为新建的表情节点
            range.selectNodeContents(emojiText)
            // 光标位置定位在表情节点的最大长度
            range.setStart(emojiText, emojiText.length)
            // 使光标开始和光标结束重叠
            range.collapse(true)
            // 清除选定对象的所有光标对象
            selection.removeAllRanges()
            // 插入新的光标对象
            selection.addRange(range)
        } else {
            // 如果是文本节点则先获取光标对象
            var range = selection.getRangeAt(0)
            // 获取光标对象的范围界定对象，一般就是textNode对象
            var textNode = range.startContainer;
            // 获取光标位置
            var rangeStartOffset = range.startOffset;
            // 文本节点在光标位置处插入新的表情内容
            textNode.insertData(rangeStartOffset, field)
            // 光标移动到到原来的位置加上新内容的长度
            range.setStart(textNode, rangeStartOffset + field.length)
            // 光标开始和光标结束重叠
            range.collapse(true)
            // 清除选定对象的所有光标对象
            selection.removeAllRanges();
            // 插入新的光标对象
            selection.addRange(range)
        }
        // 无论如何都要记录最后光标对象
        lastEditRange = selection.getRangeAt(0)

    });*/


$('.fieldMathCount').on('click','.appendEdit',function(){
    var text = $(this).text();
    $('#edit').focus();
    insertHtmlAtCaret(text);
});

    $('#tree_3').on('click','.jstree-open>.jstree-children>li>a',function(){
        if($(this).next().length > 0 || $(this).parent('li').hasClass('jstree-closed')){
            return false;
        }
        var field = $(this).text();
      //  $('#edit').focus();
        insertHtmlAtCaret('&nbsp;<span class="fieldSingle" contenteditable="false">'+field+'</span>&nbsp;');

    });

    $('.func').click(function(){
        if($('.layui-layer-iframe').length == 0){
            layer.open({
                type:2,
                title:'函数',
                shade: 0,
                area:['900px','600px'],
                content: ['func.html']
            })
        }

    });

function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
// IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ( (node = el.firstChild) ) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
// Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
// IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    }

</script>

</html>



